<template>
  <div class="mask">
    <div class="entry-agreement">
      <img src="@/assets/images/icon-close.png" alt="" class="icon-close" @click="handleClose">
      <div class="content" v-html="promoteInfo.protocol"></div>
<!--      <div class="content">-->
<!--        经营合同<br><br>-->

<!--        双方经友好协商，对于商城合作一事达成如下协议：<br><br>-->

<!--        合作期间：<br><br>-->

<!--        一、甲方责任<br><br>-->

<!--        1.甲方需提供足够的供应商以及商品，用于合作。<br><br>-->

<!--        2.甲方需提供安全及运输工作，以其一切工商税务和运输费用等。<br><br>-->

<!--        其包括：打包、安装、售后、运输、公共关系，等一切费用<br><br>-->

<!--        3.甲方需保证物流运输的正常运行，并负责商品和工作人员的安全。<br><br>-->

<!--        如出现人为破坏，被盗，物品损坏，均由甲方全面负责，照价赔偿。<br><br>-->

<!--        二、乙方责任<br><br>-->

<!--        1.乙方需提供商品成本、维护商城买家（客户关系）。<br><br>-->

<!--        2.乙方保证良好的个人信用。<br><br>-->

<!--        3.乙方需24小时内及时处理订单。<br><br>-->

<!--        三、违约条款<br><br>-->

<!--        1.如有特殊情况，经双方协商协议解决。<br><br>-->

<!--        2.如受政策影响，特殊情况和经营状态不好。乙方全权负责。<br><br>-->

<!--        3.双方必须严格遵守合同规定，如单方违约，任何一方需负法律责任或者赔偿。<br><br>-->

<!--        4.即签字之日起效。<br><br>-->
<!--      </div>-->
      <div class="esign-content">
        <div>
          <p class="padding-tb"> 甲方： <span>{{ promoteInfo.party_a }}</span>
            <img :src="promoteInfo.agreement_icon">
          </p>
          <p class="padding-tb"> 日期：{{ today }} </p>
        </div>
        <div class="right">
          <p class="padding-tb"> 乙方：<img :src="signImg" class="esign-img"></p>
          <p class="padding-tb"> 日期：{{ today }} </p>
        </div>
      </div>
      <div class="pop-bnt">
        <el-button type="primary" size="large" @click="handleAgree">同意并签字</el-button>
        <el-button type="primary" size="large" @click="handleClose">确定</el-button>
      </div>
    </div>
  </div>
</template>
<script setup>
import { ref } from 'vue'
import { merchantIndex } from '@/api'
const emits = defineEmits(['handleAgree', 'handleClose'])
const props = defineProps({
  signImg: {
    type: String,
    default: ''
  },
  promoteInfo: {
    type: Object,
    default: () => {
      return {}
    }
  }
})
const content = ref(`<div></div>`)
// const signImg = ref('')
const getContent = () => {
  merchantIndex().then(res => {
    content.value = res.data
  }).catch(err => {})
}
getContent()
const handleAgree = () => {
  emits('handleAgree')
}
const handleClose = () => {
  emits('handleClose')
}
const today = ref('')
const getToday = () => {
  const date = new Date()
  const year = date.getFullYear()
  let month = date.getMonth() + 1
  month = month < 10 ? '0' + month : month
  let day = date.getDate()
  day = day < 10 ? '0' + day : day
  today.value = year + '-' + month + '-' + day
}
getToday()
</script>
<style scoped>
:deep(.el-button--primary) {
  color: #fff;
  background-color: var(--color-main);
  border-color: var(--color-main)
}
.mask{
  width: 100vw;
  height: 100vh;
  position: fixed;
  top: 0;
  left: 0;
  background: rgba(0, 0, 0, 0.5);
  z-index: 99;
}
.entry-agreement{
  width: 78rem;
  min-height: 300px;
  max-height: 90%;
  overflow: hidden;
  overflow-y: scroll;
  position: absolute;
  top: 50%;
  left: 50%;
  background: #fff;
  border-radius: 12px;
  transform: translate(-50%, -50%);
  padding: 1.25rem;
}
.icon-close{
  width: 24px;
  height: 24px;
  position: absolute;
  top: 10px;
  right: 10px;
  cursor: pointer;
}
.esign-content{
  display: flex;
  justify-content: space-between;
  margin-top: 1.25rem
}

.esign-content .right{
  margin-right: 12.5rem
}

.esign-content span{
  position: relative;
  z-index: 999
}

.esign-content .padding-tb{
  padding: .3125rem 0!important;
  display: flex;
  align-items: center;
  position: relative
}

.esign-content .padding-tb img{
  position: absolute;
  right: -1.25rem;
  top: -1.25rem;
  width: 5.75rem;
  min-height: 5.75rem;
  margin-left: .625rem
}
.pop-bnt{
  margin: 0 auto .625rem;
  display: flex;
  justify-content: center;
}
</style>